<template>
  <div class="app-container">
    <div class="section-container">
      <div class="title">{{ isEdit ? '修改' : '新增' }}报警规则</div>
      <div class="form-container">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="规则名称" prop="ruleName">
            <el-input v-model="ruleForm.ruleName" :disabled="isEdit" class="rule-name-input" maxlength="20" show-word-limit />
          </el-form-item>
          <el-form-item label="车辆状态" prop="vehicleLastStatus">
            <el-select v-model="ruleForm.vehicleLastStatus" clearable placeholder="请选择活动区域" @change="$forceUpdate()">
              <el-option v-for="vItem in vehicleStatusMap" :key="vItem.value" :label="vItem.label" :value="vItem.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="车系">
            <el-select v-model="ruleForm.seriesName " filterable clearable placeholder="请选择车系" @change="ruleForm.modelName = '', $forceUpdate()">
              <el-option v-for="item in vehicleOptions" :key="item.seriesName " :label="item.seriesName " :value="item.seriesName " />
            </el-select>
          </el-form-item>
          <el-form-item label="车型">
            <el-select v-model="ruleForm.modelName" filterable clearable placeholder="请选择车型" @change="$forceUpdate()">
              <el-option v-for="item in modelOptios" :key="item.modelName" :label="item.modelName" :value="item.modelName" />
            </el-select>
          </el-form-item>
          <el-form-item label="报警规则" prop="alarmRule" />
          <div class="rule">
            <el-radio v-model="ruleForm.alarmRule" :disabled="isEdit" :label="0">离线报警值</el-radio>
            <el-select v-model="ruleForm.offCondition" :disabled="!!ruleForm.alarmRule">
              <el-option label="大于" :value="0" />
              <el-option label="大于等于" :value="1" />
            </el-select>
            <el-input v-model.number="ruleForm.offNum" :min="0" type="number" :disabled="!!ruleForm.alarmRule" style="width: 200px;"/> Min时，即生成报警数据
          </div>
          <div class="rule">
            <el-radio v-model="ruleForm.alarmRule" :disabled="isEdit" :label="1">里程报警值</el-radio>
            <el-select v-model="ruleForm.mileageCondition" :disabled="!!!ruleForm.alarmRule">
              <el-option label="大于" :value="0" />
              <el-option label="大于等于" :value="1" />
            </el-select>
            <el-input v-model.number="ruleForm.mileageNum" :min="0" :disabled="!!!ruleForm.alarmRule" type="number" style="width: 200px;"/> Km时，即生成报警数据
          </div>
          <el-form-item>
            <div class="actions-button">
              <el-button style="margin-right: 50px;" type="primary" @click="submitForm('ruleForm')">保存</el-button>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { addCustomRule, editCustomRule } from '@/api/crossRegionalMonitoring'
// import { vehicleLastStatusMap } from '@/utils/public'
const vehicleStatusMap = [
  { value: '0', label: '发运出库' },
  { value: '1', label: '车辆入库' },
  { value: '2', label: '车辆出库' },
  { value: '3', label: '已开票' },
  { value: '4', label: '已上牌' }
]
export default {
  name: 'StandardRule',
  data() {
    return {
      vehicleStatusMap,
      ruleForm: {
        alarmRule: 0,
        ruleName: ''
      },
      rules: {
        ruleName: [
          { required: true, message: '请输入规则名称', trigger: 'blur' }
        ],
        vehicleLastStatus: [
          { required: true, message: '请选择车辆状态', trigger: 'change' }
        ],
        alarmRule: [
          { required: true, message: '请填选择报警规则', trigger: 'change' }
        ]
      },
      isEdit: false,
      // 车系车型数据集
      vehicleOptions: this.$store.state.dictionary.vehicleMap || []
    }
  },
  computed: {
    // 车型下拉选项，跟随车系而变化
    modelOptios() {
      const { seriesName } = this.ruleForm
      const allModel = this.vehicleOptions.reduce((newArr, current) => {
        return newArr.concat(current.modelNameList)
      }, [])
      const currentModelList = this.vehicleOptions.find(item => item.seriesName === seriesName)
      if (currentModelList) return currentModelList.modelNameList
      return allModel
    }
  },
    watch: {
        'ruleForm.alarmRule': function(newVal) {
        if (newVal) {
            this.ruleForm.offCondition = ''
            this.ruleForm.offNum = ''
        } else {
            this.ruleForm.mileageCondition = ''
            this.ruleForm.mileageNum = ''
        }
        }
    },
  created() {
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = { ...this.ruleForm }
          this.$delete(params, 'alarmRule')
          if (this.isEdit) {
            editCustomRule(params).then(res => {
              const { data } = res
              console.log(data)
              this.resetForm('ruleForm')
            })
          } else {
            addCustomRule(params).then(res => {
              const { data } = res
              this.resetForm('ruleForm')
              console.log(data)
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    initRuleForm(params) {
        if (params) {
            for (var key in params) {
                this.$set(this.ruleForm, key, params[key])
            }
            if (this.ruleForm.offCondition) {
                this.ruleForm.alarmRule = 0
            } else {
                this.ruleForm.alarmRule = 1
            }
        } else {
            for (var rkey in this.ruleForm) {
                this.ruleForm[rkey] = ''
                this.ruleForm.alarmRule = 0
            }
        }
        this.$forceUpdate()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.$emit('cancel')
      this.ruleForm.alarmRule = 0
    }
  }
}
</script>
<style lang="scss" scoped>
  .app-container{
    box-sizing: border-box;
    padding: 20px;
    .title{
        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
        font-weight: 650;
        font-style: normal;
        font-size: 16px;
        line-height: 60px;
    }
    ::v-deep .rule-name-input{
        width: 600px;
    }
    .rule{
        padding: 0 50px;
        font-size: 12px;
        line-height: 50px;
        ::v-deep .el-input {
           width: 200px;
           margin-left: 15px;
        }
    }
    .actions-button{
        text-align: center;
        margin-top: 20px;
    }
  }
</style>
